<!-- 1模板 html结构 -->
<template>

  <!-- 
  html结构中只能有一个根标签，
  即最外层只能有一个div容器
   -->
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <p>定义在根组件App.vue中的元素</p>
    <!-- 调用引入的组件 -->
    <HelloWorld/>
  </div>
</template>

<!-- 2行为 处理逻辑 -->
<script>

import HelloWorld from './components/HelloWorld'

// 在App.vue组件中引入HelloWorld.vue组件
// name: 要导出的模块名 即当前组件名
// components：引入的组件名

// 组件 
// 可以理解为包含某个功能的页面
// vue中1个页面由多个组件构成
// 而且组件可以嵌套多层调用

export default {
  name: 'App',
  components: { HelloWorld }
}
</script>

<!-- 3样式 -->
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
